<template>
  <div class="page-container container">
    <div class="in-container search-form-box">
      <AppSearchFormHidden
        class="search-form"
        ref="searchFormRef"
        size="small"
        :label-width="'100px'"
        :model="query"
        @search="search"
        @reset="reset"
      >
        <el-row :gutter="8">
          <el-col :span="6">
            <el-form-item label="业务编号">
              <el-input
                v-model="query.doccode"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户单号">
              <el-input
                v-model="query.custDocNo"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单号">
              <el-input v-model="query.blNo" size="small" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="箱封号">
              <el-input v-model="query.ctnNo" size="small" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="6">
            <el-form-item label="开航日期">
              <el-date-picker
                v-model="query.etd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接单日期">
              <el-date-picker
                v-model="query.recDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱日期">
              <el-date-picker
                v-model="query.packTime"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订舱日期">
              <el-date-picker
                v-model="query.bookingDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <template #hidden>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="委托单位">
                <el-select
                  v-model="query.custId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="wtdwSelect"
                  :loading="selectData.wtdw.loading"
                >
                  <el-option
                    v-for="item in selectData.wtdw.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.entFullname }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订舱单位">
                <el-select
                  v-model="query.bookingAgentId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="dcdwSelect"
                  :loading="selectData.dcdw.loading"
                >
                  <el-option
                    v-for="item in selectData.dcdw.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.entFullname }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车队">
                <el-select
                  v-model="query.truckId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="cdSelect"
                  :loading="selectData.cd.loading"
                >
                  <el-option
                    v-for="item in selectData.cd.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.entFullname }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船公司">
                <el-select
                  v-model="query.shipcompanyId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="cgsSelect"
                  :loading="selectData.cgs.loading"
                >
                  <el-option
                    v-for="item in selectData.cgs.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.entFullname }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="装货港">
                <el-select
                  v-model="query.portDepartureId"
                  placeholder="请输入后搜索"
                  filterable
                  clearable
                  remote
                  remote-show-suffix
                  :remote-method="zhgSelect"
                  :loading="selectData.zhg.loading"
                >
                  <el-option
                    v-for="item in selectData.zhg.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的港">
                <el-select
                  v-model="query.portDestinationId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="mdgSelect"
                  :loading="selectData.mdg.loading"
                >
                  <el-option
                    v-for="item in selectData.mdg.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船名">
                <el-select
                  v-model="query.vessel"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="cmSelect"
                  :loading="selectData.cm.loading"
                >
                  <el-option
                    v-for="item in selectData.cm.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="业务员">
                <el-select
                  v-model="query.salesId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="ywySelect"
                  :loading="selectData.ywy.loading"
                >
                  <el-option
                    v-for="item in selectData.ywy.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="审核状态">
                <el-select
                  v-model="query.checkStatus"
                  placeholder="请选择"
                  clearable
                >
                  <el-option :value="0" label="未审核" />
                  <el-option :value="1" label="审核中" />
                  <el-option :value="2" label="审核通过" />
                  <el-option :value="-1" label="审核未通过" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报关单号">
                <el-input
                  v-model="query.customNo"
                  size="small"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="航次">
                <el-input
                  v-model="query.voyage"
                  size="small"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作员">
                <el-select
                  v-model="query.operaterId"
                  filterable
                  remote
                  placeholder="请输入后搜索"
                  clearable
                  remote-show-suffix
                  :remote-method="czySelect"
                  :loading="selectData.czy.loading"
                >
                  <el-option
                    v-for="item in selectData.czy.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="退关状态">
                <el-select
                  v-model="query.isShutout"
                  placeholder="请选择"
                  clearable
                >
                  <el-option :value="0" label="未退关"></el-option>
                  <el-option :value="1" label="已退关"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收锁状态">
                <el-select
                  v-model="query.incomeLock"
                  placeholder="请选择"
                  clearable
                >
                  <el-option :value="0" label="收未锁"></el-option>
                  <el-option :value="1" label="收已锁"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付锁状态">
                <el-select
                  v-model="query.costLock"
                  placeholder="请选择"
                  clearable
                >
                  <el-option :value="0" label="付未锁"></el-option>
                  <el-option :value="1" label="付已锁"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6"> </el-col>
          </el-row>
        </template>
      </AppSearchFormHidden>
    </div>
    <div class="in-container table-box">
      <div class="tab">
        <el-button type="primary" @click="newDetail"> 新增 </el-button>
        <el-button type="primary" @click="openDetail"> 打开 </el-button>
        <el-button type="danger" @click="deleteData"> 删除 </el-button>
        <!-- <el-button
          type="primary"
          @click="downloadExcel"
        > 导出EXCEL </el-button> -->
        <el-dropdown style="margin-left: 10px" @command="changeAuditDataStatus">
          <el-button type="primary">
            审核状态 <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">送审</el-dropdown-item>
              <el-dropdown-item command="2">商务审核</el-dropdown-item>
              <el-dropdown-item command="-1">驳回</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <AppPageTable
        class="table"
        stripe
        :data="tableData.data"
        :option="tableData.option"
        autostyle="height:calc(100% - 32px);"
        @change="getTableData()"
        @dblClick="ondbl($event)"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="55"
          fixed="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="attachmentCount"
          label="附件数量"
          width="100"
        />
        <el-table-column
          show-overflow-tooltip
          prop="businessStatus"
          label="进度"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="checkStatus"
          label="审核状态"
          width="150"
        >
          <template #default="scope">
            {{
              scope.row.checkStatus == 0
                ? "未审核"
                : scope.row.checkStatus == 1
                ? "审核中"
                : scope.row.checkStatus == 2
                ? "审核通过"
                : "审核不通过"
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="blType"
          label="签单类型"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="bookingAgentName"
          label="订舱单位"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="doccode"
          label="订单号"
          width="120"
        >
          <template #default="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="clickOpenDetail(scope.row)"
            >
              {{ scope.row.doccode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="blNo"
          label="提单号"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="portDepartureName"
          label="装货港"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="portDestinationName"
          label="目的港"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="ctnMemo"
          label="箱型箱量描述"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="etd"
          label="ETD"
          width="150"
        >
          <template #default="scope">
            {{
              scope.row.etd
                ? $utils.formatDateTime(scope.row.etd, "YYYY-MM-DD")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="atd"
          label="开航日期"
          width="150"
        >
          <template #default="scope">
            {{
              scope.row.atd
                ? $utils.formatDateTime(scope.row.atd, "YYYY-MM-DD")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tradelaneName"
          label="航线"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="vessel"
          label="船名"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="voyage"
          label="航次"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="custName"
          label="客户名称"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="shipcompanyName"
          label="船公司"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="ctnNoDesc"
          label="箱号描述"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="custDocNo"
          label="客户单号"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="operaterName"
          label="操作员"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="ctn20"
          label="20'"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="ctn40"
          label="40'"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="ctn40h"
          label="40'HQ"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="transport"
          label="运输方式"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="isShutout"
          label="退关"
          width="150"
        >
          <template #default="scope">
            {{ scope.row.isShutout == "0" ? "未退关" : "已退关" }}
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="payment"
          label="付款方式"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="transterm"
          label="运输条款"
          width="150"
        />
        <el-table-column
          show-overflow-tooltip
          prop="customDate"
          label="申报日期"
          width="150"
        >
          <template #default="scope">
            {{
              scope.row.customDate
                ? $utils.formatDateTime(scope.row.customDate, "YYYY-MM-DD")
                : ""
            }}
          </template>
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchFormHidden from "@/components/AppSearchFormHidden.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import { fileDownload } from "@/public/publicUtils";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    AppSearchFormHidden,
    AppPageTable,
  },
  data() {
    return {
      //表格数据
      tableData: {
        data: [],
        option: useTableOption(),
      },
      //弹窗控制数据
      dialogData: {
        show: false,
        btnLoading: false,
      },
      //查询数据
      query: {
        doccode: null, //业务编号
        custDocNo: null, //客户单号
        blNo: null, //提单号
        ctnNo: null, //箱封号
        etd: [], // 预计开航日期
        recDate: [], // 接单日期
        packTime: [], // 装箱日期
        bookingDate: [], // 订舱日期
        custId: null, // 委托单位
        bookingAgentId: null, // 订舱单位
        truckId: null, // 车队
        shipcompanyId: null, // 船公司ID
        portDepartureId: null, // 装货港ID
        portDestinationId: null, // 目的港ID
        vessel: null, // 船名
        salesId: null, // 业务员ID
        checkStatus: null, // 审核状态 0草稿 1提交审核 2已审 -1驳回
        customNo: null, //报关单号
        voyage: null, // 航次
        operaterId: null, //操作员ID
        isShutout: null, //退关 0否 1是
        incomeLock: null, // 收锁状态
        costLock: null, // 付锁状态
      },
      //静态数据 下拉数据中的全部API
      ALLURL: {
        //客商管理API
        base: "/api/buenterprise/dropdownlist",
        //客商管理API
        baseAll: "/api/buenterprise/dropdownlist",
        //港口API
        port: "/api/base/port/query",
        //人员API
        man: "/api/user/userList",
        //船名(船舶)APi
        vessel: "/api/base/voyage/voyageDropDown",
      },
      //查询表单中 select下拉数据
      selectData: {
        //委托单位
        wtdw: {
          options: [],
          loading: false,
        },
        //订舱单位
        dcdw: {
          options: [],
          loading: false,
        },
        //车队
        cd: {
          options: [],
          loading: false,
        },
        //船公司
        cgs: {
          options: [],
          loading: false,
        },
        //装货港
        zhg: {
          options: [],
          loading: false,
        },
        //目的港
        mdg: {
          options: [],
          loading: false,
        },
        //船名
        cm: {
          options: [],
          loading: false,
        },
        //业务员
        ywy: {
          options: [],
          loading: false,
        },
        //操作员
        czy: {
          options: [],
          loading: false,
        },
      },
    };
  },
  methods: {
    /**
     * 查询表单下拉查询统一接口
     * @param {string} key - 对象键值
     * @param {string} url - 查询API
     * @param {object} data - 查询数据
     */
    getSelectData(key, url, data) {
      this.selectData[key].loading = true;
      this.$http
        .get(url, data)
        .then((res) => {
          if (url == this.ALLURL.base) {
            this.selectData[key].options = res.map((item) => {
              return {
                value: item.id,
                // label: `${item.entName} - ${item.entCode}`,
                label: item.entCode,
                entFullname: item.entFullname,
              };
            });
          } else if (url == this.ALLURL.baseAll) {
            this.selectData[key].options = res.map((item) => {
              return {
                value: item.id,
                // label: `${item.entCode} - ${item.entFullname}`,
                label: item.entCode,
                entFullname: item.entFullname,
              };
            });
          } else if (url == this.ALLURL.port) {
            this.selectData[key].options = res.content.map((item) => {
              return {
                value: item.id,
                label: `${item.portName} | ${item.portEnName}`,
              };
            });
          } else if (url == this.ALLURL.man) {
            this.selectData[key].options = res.map((item) => {
              return {
                value: item.id,
                label: item.nickName,
              };
            });
          } else if (url == this.ALLURL.vessel) {
            this.selectData[key].options = res.content.map((item) => {
              return {
                value: item.id,
                label: item.veseel,
              };
            });
          }
        })
        .finally(() => {
          this.selectData[key].loading = false;
        });
    },
    /**
     * 查询表单 委托单位 下拉查询
     * @param {string} data - 输入内容
     */
    wtdwSelect(data) {
      this.getSelectData("wtdw", this.ALLURL.baseAll, {
        PageIndex: 1,
        PageSize: 20,
        KeyWords: data,
      });
    },
    /**
     * 查询表单 订舱单位 下拉查询
     * @param {string} data - 输入内容
     */
    dcdwSelect(data) {
      this.getSelectData("dcdw", this.ALLURL.base, {
        PageIndex: 1,
        PageSize: 20,
        Type: "订舱单位",
        KeyWords: data,
      });
    },
    /**
     * 查询表单 车队 下拉查询
     * @param {string} data - 输入内容
     */
    cdSelect(data) {
      this.getSelectData("cd", this.ALLURL.base, {
        PageIndex: 1,
        PageSize: 20,
        Type: "车队",
        KeyWords: data,
      });
    },
    /**
     * 查询表单 船公司 下拉查询
     * @param {string} data - 输入内容
     */
    cgsSelect(data) {
      this.getSelectData("cgs", this.ALLURL.base, {
        PageIndex: 1,
        PageSize: 20,
        Type: "船公司",
        KeyWords: data,
      });
    },
    /**
     * 查询表单 装货港 下拉查询
     * @param {string} data - 输入内容
     */
    zhgSelect(data) {
      this.getSelectData("zhg", this.ALLURL.port, {
        PageIndex: 1,
        PageSize: 50,
        KeyWords: data,
      });
    },
    /**
     * 查询表单 目的港 下拉查询
     * @param {string} data - 输入内容
     */
    mdgSelect(data) {
      this.getSelectData("mdg", this.ALLURL.port, {
        PageIndex: 1,
        PageSize: 50,
        KeyWords: data,
      });
    },
    /**
     * 查询表单 船名 下拉查询
     * @param {string} data - 输入内容
     */
    cmSelect(data) {
      console.log(data, "vvvvvvv");
      this.getSelectData("cm", this.ALLURL.vessel, {
        PageIndex: 1,
        PageSize: 20,
        Veseel: data,
      });
    },
    /**
     * 查询表单 业务员 下拉查询
     * @param {string} data - 输入内容
     */
    ywySelect(data) {
      this.getSelectData("ywy", this.ALLURL.man, {
        PageIndex: 1,
        PageSize: 50,
        KeyWords: data,
      });
    },
    /**
     * 查询表单 操作员 下拉查询
     * @param {string} data - 输入内容
     */
    czySelect(data) {
      this.getSelectData("czy", this.ALLURL.man, {
        PageIndex: 1,
        PageSize: 50,
        KeyWords: data,
      });
    },
    /**
     * 查询
     */
    search() {
      this.tableData.option.page = 1;
      this.getTableData();
    },
    /**
     * 重置
     */
    reset() {
      this.query = {
        doccode: null, //业务编号
        custDocNo: null, //客户单号
        blNo: null, //提单号
        ctnNo: null, //箱封号
        etd: [], // 预计开航日期
        recDate: [], // 接单日期
        packTime: [], // 装箱日期
        bookingDate: [], // 订舱日期
        custId: null, // 委托单位
        bookingAgentId: null, // 订舱单位
        truckId: null, // 车队
        shipcompanyId: null, // 船公司ID
        portDepartureId: null, // 装货港ID
        portDestinationId: null, // 目的港ID
        vessel: null, // 船名
        salesId: null, // 业务员ID
        checkStatus: null, // 审核状态 0草稿 1提交审核 2已审 -1驳回
        customNo: null, //报关单号
        voyage: null, // 航次
        operaterId: null, //操作员ID
        isShutout: null, //退关 0否 1是
        incomeLock: null, // 收锁状态
        costLock: null, // 付锁状态
      };
      this.tableData.option.page = 1;
      this.getTableData();
    },
    /**
     * 删除业务
     */
    deleteData() {
      if (this.tableData.option.selected.length != 0) {
        let deleteArray = [];
        this.tableData.option.selected.forEach((t) => deleteArray.push(t.id));
        ElMessageBox.confirm("确定删除该账单费用", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.$http
              .post("/api/docwork/delete", {
                idArray: deleteArray,
              })
              .then((res) => {
                if (res.status) {
                  this.$message.success(res.message);
                  this.getTableData();
                } else {
                  this.$message.error(res.message);
                }
              });
          })
          .catch(() => {
            this.$message.info("取消删除");
          });
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    /**
     * 表格获取数据
     */
    getTableData() {
      this.tableData.option.loading = true;
      let url = "/api/docwork/query";

      let param = JSON.parse(JSON.stringify(this.query));
      param.PageIndex = this.tableData.option.page;
      param.PageSize = this.tableData.option.pageSize;
      const queryString = Object.keys(param)
        .map((key) => {
          // 如果数组非空，则按照多个参数处理
          if (Array.isArray(param[key]) && param[key].length > 0) {
            return param[key]
              .map((value) => `${key}=${encodeURIComponent(value)}`)
              .join("&");
          }
          // 处理其他类型的参数
          return `${key}=${encodeURIComponent(param[key] || "")}`;
        })
        .join("&");
      this.$http
        .get(`${url}?${queryString}`)
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.tableData.option.loading = false;
        });
    },
    /**
     * 改变审核数据状态
     * @param {object} data - 下拉选择命令
     */
    changeAuditDataStatus(data) {
      let newArray = [];
      this.tableData.option.selected.forEach((t) => {
        newArray.push(t.id);
      });
      if (newArray.length != 0) {
        this.$http
          .post("/api/docwork/checkTable", {
            ids: newArray,
            checkStatus: data,
          })
          .then((res) => {
            if (res.status) {
              this.$message.success(res.message);
              this.getTableData();
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    /**
     * 新增业务 转跳到详情
     */
    newDetail() {
      this.$router.openTab({
        path: "/business/docDetail",
        query: {
          title: "新增业务",
        },
      });
    },
    /**
     * 表格选择后打开详情
     */
    openDetail() {
      if (this.tableData.option.selected.length == 1) {
        this.toDetail(this.tableData.option.selected[0]);
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    /**
     * 点击表格数据打开详情
     * @param {object} row - 表格行数据
     */
    clickOpenDetail(row) {
      this.toDetail(row);
    },
    /**
     * 双击表格数据打开详情
     * @param {object} row - 表格行数据
     */
    ondbl(row) {
      this.toDetail(row);
    },
    /**
     * 跳转到详情页
     * @param {object} row - 表格行数据
     */
    toDetail(row) {
      this.$router.openTab({
        path: "/business/docDetail",
        query: {
          id: row.id,
          title: `业务详情${row.doccode}`,
          iscopy: false,
        },
      });
    },
    /**
     * 下载excel
     */
    downloadExcel() {
      let param = JSON.parse(JSON.stringify(this.query));
      const queryString = Object.keys(param)
        .map((key) => {
          // 如果数组非空，则按照多个参数处理
          if (Array.isArray(param[key]) && param[key].length > 0) {
            return param[key]
              .map((value) => `${key}=${encodeURIComponent(value)}`)
              .join("&");
          }
          // 处理其他类型的参数
          return `${key}=${encodeURIComponent(param[key] || "")}`;
        })
        .join("&");

      fileDownload(`/api/docwork/download?${queryString}`, {}, "业务信息");
    },
  },
  created() {
    this.getTableData();
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;

  :deep(.el-date-editor) {
    width: 100%;
  }

  // :deep(.el-select) {
  //   width: 100%;
  // }
  .search-form-box {
    height: auto;
    margin-bottom: 8px;
  }

  .table-box {
    flex: 1;

    .tab {
      margin-bottom: 8px;
    }

    .table {
      // :deep(.el-table__body-wrapper) {
      //   height: auto !important;
      // }
    }
  }
}
</style>
